<template>
  <div class="global">
    <h3>人口属性指标</h3>
    <div class="taps">
      <div class="tapitem">
        <div class="">
          <h5>购物性别女性</h5>
        </div>
        <div class="count">{{ info.shoppingGenderF }}人</div>
      </div>
      <div class="tapitem">
        <div class="">
          <h5>购物性别男性</h5>
        </div>
        <div class="count">{{ info.shoppingGenderM }}人</div>
      </div>
      <div class="tapitem">
        <div class="">
          <h5>近30日新增用户</h5>
        </div>
        <div class="count">{{ info.recent30DaysNewUser }}人</div>
      </div>
      <div class="tapitem">
        <div class="">
          <h5>昨日购买用户</h5>
        </div>
        <div class="count">{{ info.yesterdayPurchaseUser }}人</div>
      </div>
    </div>
    <div class="chartlist">
      <div class="chart1">
        <h3>RFM用户</h3>
        <div id="chart1"></div>

      </div>
      <div class="chart1">
        <h3>注册用户数</h3>
        <div id="chart2"></div>

      </div>
    </div>
    <div class="chartlist">
      <div class="chart1">
        <h3>用户活跃度</h3>
        <div id="chart3"></div>

      </div>
      <div class="chart1">
        <h3>用户近30天访问天数</h3>
        <div id="chart4"></div>

      </div>
    </div>

  </div>
</template>
<script>
import service from '@/request';

import * as echarts from "echarts";

export default {
  data() {
    return {
      info: {}
    }

  },
  mounted() {
    this.getdata()
    this.initEcharts1()
    this.initEcharts2()
    this.initEcharts3()
    this.initEcharts4()
  },
  methods: {
    async initEcharts4(){
      const res = await service.get("/user/recent30DaysVisitDays");
      console.log(res);

      // res.data.forEach(el=>{
      //     this.xdata.push(el.name)
      //     this.ydata.push(el.count)
      // })


      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:res.data.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:res.data.ydata,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("chart4"));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

   async initEcharts3(){
      const res = await service.get("/user/activeUserCount");
      console.log(res);

      // res.data.forEach(el=>{
      //     this.xdata.push(el.name)
      //     this.ydata.push(el.count)
      // })


      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:res.data.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:res.data.ydata,
            type: 'bar',
            areaStyle: {}
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("chart3"));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    async initEcharts2() {
      const res = await service.get("/user/registeredUserCount");
      console.log(res);

      // res.data.forEach(el=>{
      //     this.xdata.push(el.name)
      //     this.ydata.push(el.count)
      // })


      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:res.data.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:res.data.ydata,
            type: 'line',
            areaStyle: {}
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("chart2"));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    async initEcharts1() {
      const res = await service.get("/user/rfmUser");
      console.log(res);

      // res.data.forEach(el=>{
      //     this.xdata.push(el.name)
      //     this.ydata.push(el.count)
      // })
      let data = [];
      res.data.forEach(el => {
        data.push({
          name: el.name,
          value: el.count
        })
      });


      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          show: false,
          left: 'center'
        },
        series: [
          {

            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },

            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("chart1"));// 图标初始化
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    async getdata() {
      const res = await service.get("/user/populationAttributeIndicators");
      console.log(res)
      this.info = res.data
    }
  }
}
</script>
<style scoped>
#chart1 {
  width: 100%;
  height: 90%;
}
#chart2 {
  width: 100%;
  height: 90%;
}
#chart3 {
  width: 100%;
  height: 90%;
}
#chart4{
  width: 100%;
  height: 90%;
}

.chart1 {
  width: 49%;
  height: 300px;
  background: #fff;
 
}

.chartlist {
  width: 100%;
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}

.count {
  padding-left: 50px;
  box-sizing: border-box;
}

.tapitem {
  width: 20%;
  height: 100px;
  background: #fff;
  padding: 0px 10px;
  box-sizing: border-box;
}

.taps {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
}

.global {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>